<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
  <title>等级说明</title>
  <link rel="stylesheet" href="/mobile/css/index.css" />
  <script src="/mobile/js/vue.js"></script>
  <script src="/mobile/js/axios.min.js"></script>
  <script src="/mobile/js/vant.min.js"></script>
  <script src="/mobile/js/crypto-js.js"></script>
  <script src="/mobile/js/aes.js"></script>
  <script src="/mobile/js/common.js"></script>
  <style>
  * {
    margin: 0;
    padding: 0;
    -webkit-user-select: none;
    /* Safari */
    -moz-user-select: none;
    /* Firefox */
    -ms-user-select: none;
    /* IE10+/Edge */
    user-select: none;
    /* Standard syntax */
    list-style: none;
  }
  #app {
    background: #05071D;
    min-height: 100vh;
    box-sizing: border-box;
    color: #fff;
    padding: 10px;
    overflow-y: auto;
  }
  .title {
    font-size: 14px;
    font-weight: bold;
    color: #BBB6FF;
    margin-bottom: 2px;
  }
  .content {
    font-size: 12px;
    color: #fff;
    line-height: 1.5;
    margin-bottom: 10px;
  }
  .van-cell--clickable:active {
    background: none;
  }
  .van-cell,
  .van-collapse-item__content {
    background: none;
    color: #fff;
    padding: 0;
  }
  .van-col {
    height: 30px;
    line-height: 30px;
    font-size: 14px;
  }
  .van-col:not(:last-child) {
    border-right: 1px solid #fff;
  }
  .van-collapse-item:not(:last-child) .van-col {
    border-bottom: 1px solid #fff;
  }
  .van-collapse-item:last-child .van-collapse-item__content .van-row:not(:last-child) .van-col {
    border-bottom: 1px solid #fff;
  }
  .van-collapse-item__title--expanded .van-col {
    border-bottom: 1px solid #fff;
  }
  .level-box {
    margin: 10px 5px;
    text-align: center;
    border: 1px solid #fff;
    border-radius: 5px;
  }
  .table-header {
    font-size: 14px;
    font-weight: bold;
  }
  .table-header .van-col {
    border-bottom: 1px solid #fff;
    height: 40px;
    line-height: 40px;
    color: #fff;
  }
  .van-cell__right-icon {
    margin-left: -22px;
    margin-right: 6px;
    color: #fff;
    height: 30px;
    line-height: 30px;
  }
  .thumb {
    font-size: 0;
  }
  .thumb img {
    vertical-align: middle;
    height: 22px;
  }
  .level-name {
    font-weight: bold;
    color: #BBB6FF;
  }
  .level-val {
    font-size: 12px;
  }
  
  </style>
</head>

<body>
  <div id="app">
    <div class="title">1.如何升级{{type === '2' ? '魅力等级' : '财富等级'}}</div>
    <div class="content">{{type === '2' ? '魅力等级' : '财富等级'}}采用经验值升级制度，用户{{type === '2' ? '收到' : '送出'}}1贝壳礼物，则获得1{{type === '2' ? '魅力值' : '财富值'}}。</div>
    <div class="title">2.等级展示</div>
    <div class="level-box">
      <van-row class="table-header">
        <van-col span="4">等级</van-col>
        <van-col span="6">等级图标</van-col>
        <van-col span="6">等级名称</van-col>
        <van-col span="8">{{type === '2' ? '魅力值' : '财富值'}}</van-col>
      </van-row>
      <van-collapse class="table-body" v-model="activeName" :border="false">
        <van-collapse-item v-for="(item, index) in list" :key="index" :name="item.levelName" :border="false">
          <template #title>
            <van-row>
              <van-col span="4">LV.{{item.levelNumber}}</van-col>
              <van-col span="6" class="thumb"><img :src="item.thumb" alt=""></van-col>
              <van-col span="6" class="level-name">{{item.levelName}}</van-col>
              <van-col span="8" class="level-val">{{item.levelUp}}</van-col>
            </van-row>
          </template>
          <van-row v-for="(val, key) in item.items" :key="key">
              <van-col span="4">LV.{{val.levelNumber}}</van-col>
            <van-col span="6" class="thumb"><img :src="val.thumb" alt=""></van-col>
            <van-col span="6" class="level-name">{{val.levelName}}</van-col>
            <van-col span="8" class="level-val">{{val.levelUp}}</van-col>
          </van-row>
        </van-collapse-item>
      </van-collapse>
    </div>
  </div>
  <script>
  new Vue({
    el: '#app',
    data: {
      type: '',
      token: '',
      list: [],
      activeName: []
    },
    created() {
      const parse = (queryStr) => {
        const str = queryStr.replace(/^\?/, '')
        return str.split('&').reduce((pre, key) => {
          const [k, v] = key.split('=')
          pre[decodeURIComponent(k)] = decodeURIComponent(v)
          return pre
        }, {})
      }
      var data = parse(location.search)
      if (data.type && data.token) {
        this.type = data.type
        this.token = data.token
        this.getData()
      }
    },
    methods: {
      getData() {
        var query = `type=${this.type}`
        var str = ISCRYPT ? `args=${encrypt(query)}` : query
        request.get(`/api/system/app/userLevel/getLevelDesc?${str}`).then(res => {
          console.log(res)
          this.list = res.data
        })
      },
    }
  })
  </script>
</body>

</html>